<template>
  <view>
    <view class="settle">
      <!-- 全选 -->
      <label class="radio" @click="radioHandler">
        <radio value="r1" :checked="isRadio" color="#be0108" /><text>全选</text>
      </label>   
        <!-- 合计 -->
      <view class="amount">合计：<text class="amount-text">￥{{checkGoodsAmount}}</text></view>
      <!-- 结算 -->
      <view class="btn" @click="settlement">结算({{checkCount}})</view>
    </view>
  </view>
</template>

<script>
  import { mapGetters, mapMutations, mapState } from 'vuex'
  
  export default {
    name:"my-settle",
    data() {
      return {
        // 倒计时秒数
        seconds: 3,
        // timer: null
      };
    },
    computed: {
      // 所有商品总数量
      ...mapGetters('m_cart', ['checkCount', 'total', 'checkGoodsAmount']),
      ...mapGetters('m_user', ['addressStr']),
      ...mapState('m_user', ['token']),
      ...mapState('m_cart', ['cart']),
      // 全选与取消全选方法
      isRadio() {
        return this.total === this.checkCount
      }
    },
    methods: {
      ...mapMutations('m_cart', ['updateAllGoodsState']),
      ...mapMutations('m_user', ['updateRedictInfo']),
      radioHandler() {
        this.updateAllGoodsState(!this.isRadio)
      },
      // 点击结算按钮
      settlement() {
        // 1-判断是否勾选了结算的商品
        if (this.checkGoodsAmount === 0) return uni.$showMsg('请勾选结算商品')
        // 2-判断是否选择了收货地址
        if (!this.addressStr) return uni.$showMsg('请选择收货地址')
        // 3-判断是否登录了
        // if (!this.token) return uni.$showMsg('请登录')
        if (!this.token) return this.delayNavigate()
        // 调用微信支付方法
        this.payOrder()
      },
      // 微信支付方法
      async payOrder() {
        // 1创建订单
        // 2-组织订单信息对象
        const orderInfo = {
          order_price: 0.01,
          consignee_addr: this.addressStr,
          goods: this.cart.filter(item => item.goods_state).map(x => ({
            goods_id: x.goods_id,
            goods_number: x.goods_count,
            goods_price: x.goods_price
          }))
        }
        // 3-发起请求创建订单
        const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
        close(res)
        if (res.meta.status !== 200) return uni.$showMsg('订单创建失败')
        // 4-得到服务器响应的订单编号
        const orderNUmber = res.message.order_number
        console.log(orderNUmber);
        // 2. 订单预支付
        // 2.1 发起请求获取订单的支付信息
        const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNUmber })
        if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
        const payInfo = res2.message.pay
        // 3. 发起微信支付
           // 3.1 调用 uni.requestPayment() 发起微信支付
           const [err, succ] = await uni.requestPayment(payInfo)
           // 3.2 未完成支付
           if (err) return uni.$showMsg('订单未支付！')
           // 3.3 完成了支付，进一步查询支付的结果
           const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNUmber })
           // 3.4 检测到订单未支付
           if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
           // 3.5 检测到订单支付完成
           uni.showToast({
             title: '支付完成！',
             icon: 'success'
           })
      },
      // 延时导航到my组件
      delayNavigate() {
        this.showTips(this.seconds)
        const timer = setInterval(() => {
          this.seconds--
          this.showTips(this.seconds)
          if (this.seconds <= 0) {
            clearInterval(timer)
            uni.switchTab({
              url: '/pages/my/my',
              success: () => {
               this.updateRedictInfo({
                 openType: 'switchTab',
                 from: '/pages/cart/cart'
               }) 
              }
            })
            this.seconds = 3
            return
          }
        }, 1000)
      },
      // 展示倒计时的提示消息
      showTips(n) {
        uni.showToast({
          icon: 'none',
          title: '请登录后再结算！ ' + n + '秒后自动跳转到登录页',
          mask: true,
          duration: 1500
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.settle{
  font-size: 14px;
  padding-left: 5px;
  height: 50px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: aquamarine;
  .radio{
    display: flex;
    align-items: center;
  }
  .amount{
    .amount-text{
      color: #c00000;
      font-weight: bold;
    }
  }
  .btn{
    min-width: 100px;
    line-height: 50px;
    text-align: center;
    color: white;
    padding: 0 10px;
    background-color: #c00000;
  }
}

</style>